// 点检噪音
import React, { useState } from 'react'
import { Modal } from 'antd'
import './index.less'

function Voice({ voiceUrl }) {
  const [VoiceIsible, setVoiceVisible] = useState(false)
  const seeVoice = () => {
    setVoiceVisible(true)
  }
  const hideVoiceModal = () => {
    let myAuto = document.getElementById('voiceAudio');
    myAuto.pause();
    myAuto.load();
    setVoiceVisible(false)
  }

  return (
    <div className='pictrue'>
        <div className='btnbox'>
          <span className='btnStyl' style={{display:'inline-block',width: '50%', textAlign: 'center'}}  onClick={() => seeVoice(voiceUrl)}>查看</span>
          <span className='btnStyl' style={{display:'inline-block',width: '50%', textAlign: 'center'}}  onClick={() => window.open(voiceUrl)}>下载</span>
        </div>
        <div className='modalebox'>
        <Modal
        width='4rem'
        title="噪音播放"
        visible={VoiceIsible}
        onOk={hideVoiceModal}
        onCancel={hideVoiceModal}
        okText="确认"
        cancelText="取消"
        centered
        bodyStyle={{ textAlign: 'center'}}
        >
          <audio
          id="voiceAudio"
          src={voiceUrl}
          controls="controls"
          preload="preload"
          style={{ width: '100%' }}
          />
        </Modal>
      </div>
    </div>
  )
}

export default Voice
